<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="../js/vue.js"></script>
    <title>Document</title>
</head>
<body>
    <div id="app">
        <!-- v-on 实现事件绑定 简写@ 使用语法：v-on:事件名称 ='事件处理函数' -->
        <input type="button" v-model = 'btn.alert' v-on:click='alert'></br>
        <!-- 带参数的事件处理程序 -->
        <!-- 1没有传递参数 默认传递当前的事件源对象 -->
        <input type="button" value="带参不传参" @click ='fn'></br>
        <!-- 2手动传递参数 则不再默认传递当前的事件源对象 -->
        <input type="button" value="手动传参" @click='fn1("手动传参")'></br>
        <!-- 3手动传参带事件源对象 -->
        <input type="button" value="手动传参带事件源对象" @click='fn2("手动传参",$event)'></br>
        <!-- this在methods的指向 vue对象-->
        <input type="button" v-on:click='ts' value="this在methods的指向"></br>
        <!-- 的this在data的指向 window-->
        <input type="button" v-on:click='ths' value="this在data的指向"></br>
        <a href="./01-helloWorld.html" @click.prevent='ths'>阻止行为</a>




    </div>
</body>
<script>
    let vm = new Vue({
        el : '#app',
        data : {
            btn: {
                alert : '点击触发弹框',
            },
            ths(){
                console.log(this)
            }
        },
        methods : {
            alert (){
                alert('已经触发了弹框')
            },
            fn(e){
                console.log(e)
            },
            fn1(e){
                console.log(e)
            },
            fn2(e,i){
                console.log(e,i)
            },
            ts(){
                console.log(this)
            }
        }
    }) 
</script>
</html>